<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>zTree</title>
    <link rel="stylesheet" href="../plugins/ztree/css/demo.css">
    <link rel="stylesheet" href="../plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="../plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="../plugins/ztree/js/jquery.ztree.all-3.5.js"></script>

    <script>
        // 声明zTree树形控件的变量
        var zTreeObj;
        // 树形控件的全局配置
        var setting = {
            data: {
                simpleData: {
                    enable: true // 开启简单json数据结构
                }
            },
            check: {
                enable: true
            }
        };
        // 树形控件的数据结构（json数组）

        /*
            [] ： 简单结构的json数组
                {}：json节点
                    id:当前节点id
                    pId：当前父父节点的id
                    name：当前节点名称
                    open：是否展开节点
                    checked:true，展示当前节点选中
         */
        var zNodes =  [
            {id:1, pId:0, name: "父节点1"},
            {id:11, pId:1, name: "子节点1"},
            {id:12, pId:1, name: "子节点2",checked:true},
            {id:111,pId:11,name:"子节点11"}
        ];

        // 相当于 $(function(){}) 页面加载事件
        $(document).ready(function(){
            // 初始化zTree
            /*
                $("#treeDemo"):ul无序列表，用于视图渲染
                setting：全局配置
                zNodes：数据
             */
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            // 展开全部节点
            zTreeObj.expandAll(true);
            
            // 提交选中节点
            $('#addCheck').click(function () {
                var nodes = zTreeObj.getCheckedNodes(true);
                for (let node of nodes) {
                    console.log(node.id);
                }
            })
        });
    </script>

</head>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>

<button id="addCheck">提交</button>
</body>
</html>